<template>
    <div class='nav'>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router>
            <el-menu-item index="/welcome">Welcome</el-menu-item>
            <el-menu-item index="/entity">实体统计</el-menu-item>
            <el-submenu index="/relation">
                <template slot="title">关系统计</template>
                <el-menu-item index="/character">人物关系</el-menu-item>
                <el-menu-item index="/house">家族关系</el-menu-item>
                <el-menu-item index="/castle">城堡关系</el-menu-item>
            </el-submenu>
            <el-submenu index="/visual">
                <template slot="title">图结构</template>
                <el-menu-item index="/global">整体关系图</el-menu-item>
                <el-menu-item index="/simple">单节点关系图</el-menu-item>
                <el-menu-item index="/complex">多节点关系图</el-menu-item>
            </el-submenu>
            <el-menu-item index="/faq">知识问答</el-menu-item>
            <el-menu-item index="/query">高级查询</el-menu-item>
        </el-menu>
    </div>
</template>
<script>
export default {
  name: 'MainNav',
  data () {
    return {
      activeIndex: this.$route.path
    }
  }
}
</script>
<style scoped>
.nav{
    margin-top: 25px;
    display:inline-block
}
</style>
